<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String filePath = basePath+"/view/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
	<base href="<%=basePath%>">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Insert title here</title>
	<link rel="shortcut icon" href="favicon.ico"> 
    <link href="view/bac/css/font-awesome.min.css" rel="stylesheet">
    <link href="view/bac/css/animate.css" rel="stylesheet">
    <link href="view/bac/css/style.css" rel="stylesheet">
    
    <!-- Bootstrap -->
    <link href="view/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">

	<!-- Styling -->
	<link href="view/plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet">
	<link href="view/bac/css/overrides.css" rel="stylesheet">
	<link href="view/bac/css/styles.css" rel="stylesheet">
	<link href="view/bac/css/NeWorld.css" rel="stylesheet">
	<!-- Custom Styling -->
	<link href="view/bac/css/color.css" rel="stylesheet" >

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!-- [if lt IE 9]
	  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	[endif] -->

	<link href="view/bac/css/index-style.css" rel="stylesheet" type="text/css">
	<link href="view/bac/css/ofc-bootstrap-child.css" rel="stylesheet" type="text/css">

	
	<!-- <script src="./高速云端数据传输服务_files/qqconnect.js.下载"></script> -->

	<style type="text/css">
	
		html,body,div{padding:0;margin:0}
		
		.li-title{font-size: 16px}
	</style>
	
	<link rel="stylesheet" type="text/css" href="view/rec/css/base.css">
	<link rel="stylesheet" type="text/css" href="view/rec/css/index.css">
    
    
    <script src="view/plugins/jquery/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="view/rec/js/jQueryColor.js"></script>
	<!--这个插件是瀑布流主插件函数必须-->
	<script type="text/javascript" src="view/rec/js/jquery.masonry.min.js"></script>
	<!--这个插件只是为了扩展jquery的animate函数动态效果可有可无-->
	<script type="text/javascript" src="view/rec/js/jQeasing.js"></script>
	<script src="view/bac/js/ofc-pub.js"></script>
    
    
    <script type="text/javascript">
	/*
		抛开瀑布流布局各种乱七八糟的算法，基于masonry的瀑布流，很是简单的，而且通过扩展animate,能实现瀑布流布局的晃动、弹球等效果。
		masonry还有很多参数我这里注解了常用的参数
	 */
		$(function(){
				
			
	        var $window = $(window);  
	        var $document = $(document);
				
				/*瀑布流开始*/
				var container = $('.waterfull ul');
				var loading=$('#imloading');
				// 初始化loading状态
				loading.data("on",true);
				/*判断瀑布流最大布局宽度，最大为1280*/
				function tores(){
					var tmpWid=$(window).width();
					if(tmpWid>1280){
						tmpWid=1280;
					}else{
						var column=Math.floor(tmpWid/320);
						tmpWid=column*320;
					}
					$('.waterfull').width(tmpWid);
				}
				tores();
				$(window).resize(function(){
					tores();
				});
				container.imagesLoaded(function(){
				  container.masonry({
				  	columnWidth: 320,
				    itemSelector : '.item',
				    isFitWidth: true,//是否根据浏览器窗口大小自动适应默认false
				    isAnimated: true,//是否采用jquery动画进行重拍版
				    isRTL:false,//设置布局的排列方式，即：定位砖块时，是从左向右排列还是从右向左排列。默认值为false，即从左向右
				    isResizable: true,//是否自动布局默认true
				    animationOptions: {
						duration: 800,
						easing: 'easeInOutBack',//如果你引用了jQeasing这里就可以添加对应的动态动画效果，如果没引用删除这行，默认是匀速变化
						queue: false//是否队列，从一点填充瀑布流
					}
				  });
				});
				/*模拟从后台获取到的数据*/
				var sqlJson=[{'title':'瀑布流其实就是几个函数的事！','intro':'爆料，苏亚雷斯又咬人啦，C罗哪有内马尔帅，梅西今年要不夺冠，你就去泰国吧，老子买了阿根廷赢得彩票，输了就去不成了。','src':'images/one.jpg','writer':'标题','date':'2小时前','looked':321},{'title':'瀑布流其实就是几个函数的事！','intro':'爆料了，苏亚雷斯又咬人啦，C罗哪有内马尔帅，梅西今年要不夺冠，你就去泰国吧，老子买了阿根廷赢得彩票，输了就去不成了。','src':'images/demo2.jpg','writer':'标题','date':'2小时前','looked':321},{'title':'瀑布流其实就是几个函数的事！','intro':'爆料了，苏亚雷斯又咬人啦，C罗哪有内马尔帅，梅西今年要不夺冠，你就去泰国吧，老子买了阿根廷赢得彩票，输了就去不成了。','src':'images/p1.jpg','writer':'标题','date':'2小时前','looked':321},{'title':'瀑布流其实就是几个函数的事！','intro':'爆料了，苏亚雷斯又咬人啦，C罗哪有内马尔帅，梅西今年要不夺冠，你就去泰国吧，老子买了阿根廷赢得彩票，输了就去不成了。','src':'images/p1.jpg','writer':'标题','date':'2小时前','looked':321}];
				/*本应该通过ajax从后台请求过来类似sqljson的数据然后，便利，进行填充，这里我们用sqlJson来模拟一下数据*/
				$(window).scroll(function(){
					if(!loading.data("on")) return;
					// 计算所有瀑布流块中距离顶部最大，进而在滚动条滚动时，来进行ajax请求，方法很多这里只列举最简单一种，最易理解一种
					var itemNum=$('#waterfull').find('.item').length;
					var itemArr=[];
					itemArr[0]=$('#waterfull').find('.item').eq(itemNum-1).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
					itemArr[1]=$('#waterfull').find('.item').eq(itemNum-2).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
					itemArr[2]=$('#waterfull').find('.item').eq(itemNum-3).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
					var maxTop=Math.max.apply(null,itemArr);
					
					console.log(maxTop);
					
					if(maxTop<$(window).height()+$(document).scrollTop()){ 
						//加载更多数据
						
						sqlJson = getGalleryData();
						
						loading.data("on",false).fadeIn(10);
						(function(sqlJson){
							/*这里会根据后台返回的数据来判断是否你进行分页或者数据加载完毕这里假设大于30就不在加载数据*/
							if(sqlJson==null || sqlJson ==""){
								loading.text('就有这么多了！');
							}else{
								var html="";
								for(var i in sqlJson){
									console.log(sqlJson[i]);
									html+="<li class='item'><a href='getGalleryContent?serialId="+sqlJson[i].serial_id+"' target='_blank' class='a-img'><img src='"+sqlJson[i].req_url.split("@")[0]+"'></a>";
									html+="<h2 class='li-title'>"+sqlJson[i].blog_title+"</h2>";
									html+="<p class='description'>"+sqlJson[i].intro+"</p><div class='qianm clearfloat'>";
									html+="<span class='sp1'><b>"+sqlJson[i].click_num+"</b>浏览</span>";
									html+="<span class='sp2'>"+sqlJson[i].click_num+"</span><span class='sp3'>"+sqlJson[i].update_time+"&nbsp;By</span></div></li>";		
								}
								/*模拟ajax请求数据时延时800毫秒*/
								 //var time=setTimeout(function(){
									 /* $(html).find('img').each(function(index){
										loadImage($(this).attr('src'));
									}) */
									var $newElems = $(html).css({ opacity: 0}).appendTo(container);
									$newElems.imagesLoaded(function(){
										$newElems.animate({ opacity: 1},10);
										container.masonry( 'appended', $newElems,true);
										loading.data("on",true).fadeOut();
										//clearTimeout(time);
							        }); 
								//},800) 
							}
						})(sqlJson);
					}
				});
				function loadImage(url) {
				     var img = new Image(); 
				     //创建一个Image对象，实现图片的预下载
				      img.src = url;
				      if (img.complete) {
				         return img.src;
				      }
				      img.onload = function () {
				       	return img.src;
				      };
				 };
				 loadImage('view/rec/images/one.jpg');
				/*item hover效果*/
				var rbgB=['#71D3F5','#F0C179','#F28386','#8BD38B'];
				$('#waterfull').on('mouseover','.item',function(){
					var random=Math.floor(Math.random() * 4);
					$(this).stop(true).animate({'backgroundColor':rbgB[random]},1000);
				});
				$('#waterfull').on('mouseout','.item',function(){
					$(this).stop(true).animate({'backgroundColor':'#fff'},1000);
				});
		})
		
		
		function getGalleryData(){
		
			var nextPageNum =$("#pageNum").val();
			
			nextPageNum = parseInt(nextPageNum)+1;
			
			var par={
    				"page":nextPageNum,
    				"tagNo":''
    				}
    		var result = doPost("getGalleryPage", par);
			var objlist = result.detail.gallery.list;
			$("#pageNum").val(nextPageNum);
			return objlist;
		}
    </script>
</head>
<body >
	<div class="view">
		<a class="left-menu-toggle">
			<span class="pane"></span>
			<span class="pane"></span>
			<span class="pane"></span>
		</a>
		
		<div class="left-menu">
			<header class="header">
				<a class="navbar-brand" href="https://www.zzcloud.me/index.php" title="ZZCloud">ZZCloud</a></header>
			<div class="left-menu-wrap">
				<section class="menu">
					<ul>
						<li class="item active">
							<a href="https://www.zzcloud.me/clientarea.php">
								<i class="alico icon-menu"></i>用户中心</a>
						</li>
						<li class="item ">
							<a >
								<i class="alico icon-ecs"></i>产品服务
								<span class="fa fa-caret-down"></span></a>
							<ul>
								<li>
									<a  name="http://www.baidu.com">我的服务</a>
								</li>
								<li>
									<a  name="bac/blogpush">购买服务</a></li>
							</ul>
						</li>
					</ul>
				</section>
			</div>
			<section class="account account button-more button-more--noresponsive">
				<div class="center ng-binding">
					<div class="logout">
						<a href="https://www.zzcloud.me/logout.php" title="退出账户">
							<i class="md md-settings-power"></i>
						</a>
					</div>SSCLexy
					<span class="label">SSCloud Network Ltd.</span></div>
			</section>
		</div>
		
		
		<!--  RIGHT -->
		<div class="right-content">
			<section class="header-nav">
				<div class="pull-left">
					<ol class="breadcrumb">
						<li>
							<a href="index.php">门户首页</a></li>
						<li class="active">用户中心</li></ol>
				</div>
				<div class="pull-right hidden-xs hidden-sm" style="padding-top: 17px;">
					<form role="form" method="post" action="clientarea.php?action=kbsearch">
						<input type="hidden" name="token" value="9c044e01fc4f41ec95af8aae95e8a4377c763f64">
						<div class="home-kb-search">
							<input type="text" name="search" class="form-control" placeholder="在此处输入问题寻找答案…">
							<i class="fa fa-search"></i>
						</div>
					</form>
					<!-- Language -->
					<a href="/cart.php?a=view" class="btn btn-primary">
						<i class="fa fa-shopping-cart"></i>
						<span id="cartItemCount" class="badge badge-danger">0</span></a>
				</div>
			</section>
			
			<!--  个人信息 -->
			<div class="navbar-collapse-inner">
				<div class="navbar-collapse-bg"></div>
				<div class="navbar-collapse-icon">
					<i class="alico icon-list-open"></i>
					<i class="alico icon-list-close"></i>
				</div>
			</div>
			<div class="sub-menu">
				<div menuitemname="Client Details" class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">
							<i class="fa fa-user"></i>&nbsp; 您的信息</h3>
					</div>
					<div class="panel-body">
						<p>
							<strong>SSCloud Network Ltd.</strong>
							<br>
							<strong>Lexy SSC</strong></p>
						<p>Beijing No. 2 Justice Road
							<br>地址（第二行）
							<br>Beijing
							<br>Beijing
							<br>100000
							<br>China</p></div>
					<div class="panel-footer clearfix">
						<a href="clientarea.php?action=details" class="btn btn-success btn-sm btn-block">
							<i class="fa fa-pencil"></i>更新</a>
					</div>
				</div>
			</div>
			<!-- 个人信息 END -->
			<section id="main-body" class="content content--border">
				<div class="content">
					<!-- 瀑布流样式开始 -->
					<div class="waterfull clearfloat" id="waterfull">
						<ul>
							<c:forEach items="${gallery.list }" var="obj">
							
							<li class="item">
								<a href="getGalleryContent?serialId=${obj.serial_id }" target="_blank" class="a-img">
									<img src="${obj.blog_content}" alt="">
									
								</a>
								<h2 class="li-title" title="${obj.blog_title}">${obj.blog_title}</h2>
								
								<div class="qianm clearfloat">
									<span class="sp1"><b>${obj.click_num}</b>浏览</span>
									<span class="sp2">${obj.update_user_name}</span>
									<span class="sp3">${obj.update_time} &nbsp;By</span>
								</div>
							</li>
							
							
							</c:forEach>
						</ul>
					</div>
					<!-- loading按钮自己通过样式调整 -->
					<div id="imloading" style="width:150px;height:30px;line-height:30px;font-size:16px;text-align:center;border-radius:3px;opacity:0.7;background:#000;margin:10px auto 30px;color:#fff;display:none">
					素材加载中.....
					</div>
				</div>
				<input type="hidden" id="pageNum" value="1">
			</section>
			
			
			
		</div>
	</div>
	<!-- jQuery -->
	<script src="view/plugins/bootstrap/js/bootstrap.min.js"></script>
	<script src="view/plugins/bootstrap-hover/bootstrap-hover.min.js"></script>
	<script src="view/plugins/bootstrap-select/bootstrap-select.min.js"></script>
	<script src="view/bac/js/wow.min.js"></script>
	<script src="view/bac/js/jquery.zclip.js"></script>
	<script src="view/bac/js/jquery-ui.min.js"></script>
	<script src="view/bac/js/whmcs.js"></script>
	<script src="view/bac/js/AjaxModal.js"></script>
	
	<script type="text/javascript">
	
	$(function(){
		$(".menu .item a").click(function(){
			
			var val = $(this).attr("name");
			if(val!="undefined" && val !=null && val!=""){
				
				$("#iframe0").attr("src" , val);
				var c = $(this).parent().parent().parent().attr("class");
				console.log(c);
			}
		})
	})
	
	
	</script>
</body>
</html>